<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>站长随想录</title>


    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            font-size: larger;
            transition: background-color 0.5s, color 0.5s;
            max-width: 800px;
            margin: 0 auto;
            padding: 12px;
        }
        blockquote {
            /* background-color: rgb(222, 222, 224);
        border-left: 5px solid rgb(170, 170, 171); */
            font-style: italic;
            text-align: center;
            display: block;
            margin: 0 auto;
            width: 60%;
        }
        img{
            margin: 0 auto;
            width: 55%;
            display: block;
            border: 1px solid rgb(210, 208, 208);
        }
        /* 浅色模式 */
        .light-mode {
            background-color: #ffffff;
            color: #000000;
        }

        /* 深色模式 */
        .dark-mode {
            background-color: #121212;
            color: #ffffff;
        }

        /* 切换按钮样式 */
        .toggle-button {
            cursor: pointer;
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: transparent;
            border: none;
            outline: none;
            transition: transform 0.5s;
        }
    </style>
</head>
<body class="dark-mode">
<div th:replace="~{common-page/header.html :: myheader}"></div>


<h3><a href="/articles"  style="color: #b0aeae; ">文章列表</a></h3>


<!--    <li th:each="item , iterStat: ${articles}">-->
<!--        <span th:text="${iterStat.index}"></span>-->
<!--        <a th:href="@{'/article/'+${item.id}}" th:text="${item.title}"></a>-->
<!--    </li>-->


<h1 th:text="${article.title}"></h1>
<p id="article-content"></p>


<!--<div><span>发表于 : </span> <span th:text="${article.uploadDate}"></span></div>-->


<h1>
    <!--    <a href="#">TESTTTTTTTTTTT-========</a>-->
</h1>


<button class="toggle-button" onclick="toggleMode()">
    <?xml version="1.0" encoding="UTF-8"?>
    <svg width="33" height="33" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M24.0033 4L29.2737 9.27038H38.7296V18.7263L44 23.9967L38.7296 29.2737V38.7296H29.2737L24.0033 44L18.7264 38.7296H9.27036V29.2737L4 23.9967L9.27036 18.7263V9.27038H18.7264L24.0033 4Z" fill="#2F88FF" stroke="#333" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M27 17C27 25 22 26 17 26C17 30 23.5 34 29 30C34.5 26 31 17 27 17Z" fill="#43CCF8" stroke="#FFF" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</button>


<!--<h1> 深色模式 夜间模式 dark model 实现 </h1>-->
<!--<p> 阳光洒在海面上，金色的光泽闪烁着夏日的热烈。我和朋友一同前往海边，准备享受一次划船的乐趣。轻轻推舟，船儿在碧波中缓缓前行，海风拂面，带着些许咸味和无尽的清新。我们时而竞速，时而相互泼水，欢声笑语成为了这个夏日最美的旋律。海水在桨下跳跃，像是活泼的音符，奏出夏天的赞歌。划船间，我们分享彼此的梦想与未来的计划，海浪轻拍，似乎也在倾听我们的对话。这次划船不仅让我们领略了大海的壮阔 </p>-->


<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/marked/3.0.6/marked.min.js"></script>
<script th:inline="javascript">

    // 切换深色模式和浅色模式
    function toggleMode() {
        document.body.classList.toggle('dark-mode');
        document.body.classList.toggle('light-mode');
    }

    let article = [[${article}]];
    console.log(article);
    console.log(article.uploadDate);

    document.addEventListener("DOMContentLoaded", function () {
        let contentElement = document.getElementById("article-content");
        let markdownContent = article.content; // Get the raw markdown content
        let htmlContent = marked.parse(markdownContent); // Convert markdown to HTML
        contentElement.innerHTML = htmlContent; // Render the HTML content
    });


</script>
</body>
</html>





